<!--下拉联动 optionList :props="propsCascader"-->
<template>
  <el-cascader
    v-model="value"
    v-bind="$attrs"
    :clearable="clearable"
    :options="myoptionList"
    :filter-method="filterMethod"
    filterable
    :props="propsCascader"
  >
  </el-cascader>
</template>

<script setup lang="ts" generic="T extends object">
  import { computed, defineComponent, reactive } from 'vue'
  // import { ElCascader } from 'element-plus'
  // 引入组件需要的属性 引入表单子控件的管理类
  import {
    getChildrenOne,
    getChildren,
    shallowToDeep,
    // cascaderManage,
    loadController,
    EControlType
  } from '../map'
  
  import type { IFormChildProps } from '../map'
  import { itemController } from '../map'

  defineOptions({
    name: 'el-from-item-select-cascader',
    inheritAttrs: false,
  })

 

  const cascaderManage = (props) => {
    const levelName = props.meta.colName.split('_')

    // 不需要动态联动
    const noLazy = {
      // checkStrictly: true,
      lazy: false
    }

    // 需要动态联动
    const propsCascader = reactive({
      // multiple: false, // 单选还是多选 多选返回 value 的二维数组
      lazy: true, // 动态级联
      lazyLoad (node, resolve) { // 响应函数resolve
        const { level } = node
        // 判断级数是否超过数组下标
        if (levelName.length >= level) {
          // 找到子数据-
          const key = levelName[level]
          const newNode = [{
            value: '222',
            label: '选项11',
            leaf: true
          }]
          // const newNode = data[key].filter((item) => item.parentId === node.value)
          resolve(newNode) // 交给组件
        } else {
          resolve([{
            value: '22',
            label: '选项11',
            leaf: true
          }])
        }
      }
    })
    return { propsCascader: noLazy }
    // return {    propsCascader  }
  }

  const props = withDefaults(defineProps<IFormChildProps<T> & {
    optionKind?: string, // // deep 前端嵌套风格； shallow 后端浅层多数组风格
    cascaderProps?: object // cascader 的 props
  }>(), {
    meta: () => {
      return {
        colName: '',
        controlType: EControlType.selectCascader
      }
    },
    model: () => {
      return {} as T
    },
    clearable: true,
    optionKind: 'deep',
    cascaderProps: () => { return {} },

  })
  
  const {
    propsCascader
  } = cascaderManage(props)

  const { value  } = itemController(props)

  // 设置默认值
  if (props.meta.defValue) {
    value.value = props.meta.defValue
  }

  const filterMethod = (node, value) => {
  }


  // const newOpt2 = getChildrenOne(foo2, '', 0)

  const optionList = props.optionList

  const myoptionList = computed(() => {
    if (Array.isArray(optionList)){
      // 数组类型
      // 没有数据
      if (optionList.length === 0) return optionList

      // 原生模式
      if (optionList[0].children) 
        return optionList

      // 单表
      if (typeof optionList[0].parentId !== 'undefined')
        return getChildrenOne(optionList, '', 0)

      if (typeof optionList[0] === 'object') {
        // 多表
        return shallowToDeep(optionList[0])
      }
    }
  })

  // 从后端获取数据
  const { loadDict } = loadController(props)
  loadDict()

  // 监听联动的值的变化

  /**
   * 来源：json 、后端API、第三方API、前端缓存
   * 结构：前端风格、多层，后端多表，后端单表
   * 完整度：完整，需要根据选项动态加载。
   * 
   */
     
</script>
